import React from "react";
import ReactDOM from "react-dom";
import store from "./store";
import { Provider } from "react-redux";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import { Navigator } from "./components";
import { Counter, Cart, Product, Details, Home,Login } from "./container";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from 'redux-persist'
import "antd/dist/antd.css";
import style from "./main.scss";
const persistor = persistStore(store)

class Index extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Navigator />
          <Switch>
            <Route path="/" component={Home} exact />
           
            <Route path="/counter" component={Counter} />
            <Route path="/product/:id" component={Details} />
            <Route path="/product" component={Product} />
            <Route path="/cart" component={Cart} />
            <Route path="/login" component={Login} />
            <Route path="/" component={Home}  />

          </Switch>
        </div>
      </Router>
    );
  }
}

ReactDOM.render(
  //6.容器组件要与仓库创建联系,通过provider提供store给组件
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Index />
    </PersistGate>
  </Provider>,
  document.getElementById("app")
);
